<!--
 * @Description: 第一章入门
 * @Author: IA ia@ker.center
 * @Date: 2025-02-25 16:22:35
-->
<template>
  <div style="height:100vh; overflow-y: scroll;">
    <div class="scrollBehavior">第十一章-滚动行为</div>
    <div>
      <router-view #default="{ route, Component }">
      <transition :enter-active-class="`animate__animated ${route.meta?.transition}`">
        <component :is="Component"></component>
      </transition>
    </router-view>
    </div>
  </div>

</template>
<script setup lang="ts">

import 'animate.css';

</script>
<style>
* {
  padding: 0;
  margin: 0;
}

html,
body,
#app {
  height: 100%;
  overflow: hidden;
}

h1,
h2,
h3,
h4,
hr {
  margin: 10px 0;
}

.scrollBehavior {
  width: 80%;
  height: 800px;
  margin: 0 10%;
  background-color: black;
  color: #fff;
  text-align: center;
  line-height: 1000px;
  font-size: 30px;
}
</style>